<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ todoLen }}</strong>
      <span>项待办</span>
    </span>
    <ul class="filters">
      <li>
        <a
          href="javascript:void(0)"
          :class="{ selected: curStatus === 'All' }"
          @click="setCurStatus('All')"
        >
          All
        </a>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          :class="{ selected: curStatus === 'Active' }"
          @click="setCurStatus('Active')"
        >
          Active
        </a>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          :class="{ selected: curStatus === 'Completed' }"
          @click="setCurStatus('Completed')"
        >
          Completed
        </a>
      </li>
    </ul>
    <button v-show="showClear" class="clear-completed" @click="delBatchTodo">
      Clear completed
    </button>
  </footer>
</template>

<script>
import { mapGetters, mapState, mapMutations } from "vuex";

export default {
  computed: {
    ...mapState(["curStatus", "todos"]),
    ...mapGetters(["todoLen", "showClear"]),
  },

  methods: {
    ...mapMutations(["setCurStatus"]),

    delBatchTodo() {
      // 1. 获取勾选的ids
      const ids = this.todos
        .filter((item) => item.completed)
        .map((item) => item.id);

      console.log("ids", ids);
      // 派发 delBatchTodo
      this.$store.dispatch("delBatchTodo", ids);
    },
  },
};
</script>
